<template>
	<view class="refundReason">
		<n-loading></n-loading>
		<view v-if="cardInfo">
			<view class="reason-top">
				<!-- <img :src="item.image"> -->
				<dh-image class="niccImg" :src="cardInfo.image" errorSrc="https://lovebirdopen.com/static/img/cBj/dPicture.png"></dh-image>
				<view class="reason-top-name">
					<view class="name ellipsis">{{cardInfo.name}}</view>
					<view class="type">{{cardInfo.specs}} {{cardInfo.num}}瓶</view>
				</view>
			</view>
			<view class="reason-detail">
				<u-form :model="form" ref="uForm" label-width="140">
					<u-form-item label="退卡原因"><u-input v-model="form.reason" type="select" @click="reasonShow=true"/></u-form-item>
					<u-form-item label="退款方式"><u-input v-model="form.type" :disabled="true"/></u-form-item>
					<u-form-item label="退款金额"><u-input v-model="form.price" style="color: #FF5238;" :disabled="true"/></u-form-item>
				</u-form>
			</view>
			<!-- 按钮 -->
			<view class="handleBox" :style="{paddingBottom:isIphoneX?'40rpx':''}">
				<!-- <button class="reclose" @tap="">取消</button> -->
				<button class="remind" @tap="submitReason()">提交</button>
			</view>	
		</view>
		
		<u-select v-model="reasonShow" :list="reasonList" @confirm="confirm"></u-select>
	</view>
</template>

<script>
export default{
	data() {
		return{
			// 手机机型
			modelmes:null,
			isIphoneX:false,
			type:null,
			cardInfo:null,
			order_id:null,
			form: {
				type: '退回原账户',
				reason: '',
				price:null,
			},
			reasonShow:false,
			reasonList: [],
		}
	},
	onLoad: function (option) {
		// 判断机型iPhone X的
		this.modelmes = uni.getStorageSync('modelmes');
		if (this.modelmes.search('iPhone X') != -1) {
		   this.isIphoneX = true;
		}
		this.type = option.type;
		this.cardId = option.id;
		this.getOrderInfo(option.id);
		this.getReason();
	},
	methods:{
		getOrderInfo(id){
			this.apiget('/mall/liquor-card/view',{id:id}).then(res =>{
				if(res.data.status == 200 ) {
					this.cardInfo = res.data.data;
					this.form.price = '￥'+ res.data.data.refund_money;
					this.order_id = res.data.data.order_id;
				}
			})
		},
		getReason(){
			// type 类型 1退款 2退货 3退卡
			var _this = this;
			this.apiget('/fun/bill-aftersales-reason/index',{type:3}).then(res =>{
				if(res.data.status == 200 ) {
					var list = res.data.data.list;
					list.forEach(v => {
						var eachObj = {};
						eachObj.value = v.id;
						eachObj.label = v.reason;
						_this.reasonList.push(eachObj);
					})
				}
			})
		},
		confirm(e) {
			this.form.reason = e[0].label
		},
		submitReason() {
			var _this = this;
			if(this.form.reason == ''){
				uni.showToast({
					icon: 'none',
					duration:1000,
					title: '请选择退卡原因'
				});
				return false;
			}
			this.apipost('/fun/bill-aftersales/create',{order_id:this.order_id,type:1,refuse_msg:this.form.reason}).then(res =>{
				if(res.data.status == 200 ) {
					uni.showToast({
						icon: 'success',
						duration:1000,
						title: '操作成功',
						success: res => {
							setTimeout(function (){
								if(_this.type==2){//我的酒卡
									uni.redirectTo({
										url: '../mine/myCard'
									});
								}else{//酒卡
									uni.reLaunch({
									    url: '/pages/index?barCur=2'
									});
								}
							}, 1000);
						},
					});
				}
			})
			// uni.navigateTo({
			// 	url:'./refundResult'
			// })
		}
	}
}
</script>

<style lang="scss">
	.refundReason{
		background: #f5f5f5;
		width: 100%;
		height: 100%;
		.reason-top{
			width: 100%;
			height: 160rpx;
			padding: 24rpx 32rpx;
			background-color: #fff;
			display: flex;
			
			img{
				width: 116rpx;
				height: 116rpx;
				border-radius: 8rpx;
				margin-right: 32rpx;
			}
			
			.niccImg{
				width: 116rpx;
				height: 116rpx;
				border-radius: 8rpx;
				margin-right: 32rpx;
			}
			
			.reason-top-name{
				// width: 60%;
				flex: auto;
				width: 1px;
				height: 90rpx;
				padding-top: 12rpx;
				.name{
					color: #333333;
					font-size: 32rpx;
					
				}
				.type{
					color: #999999;
					font-size: 24rpx;
				}
			}
			.reason-price{
				display: block;
				color: #333333;
				font-size: 32rpx;
				line-height: 90rpx;
			}
		}
		.reason-detail{
			width: 100%;
			background: #fff;
			// min-height: 668rpx;
			padding: 24rpx 32rpx;
			margin-top: 16rpx;			
				
			.mt28{
				margin-top: 28rpx;
			}
			.imgTips{
				font-size: 28rpx;
				line-height: 36rpx;
				color: #666666;
			}
			
			.addImage{
				display: flex;
				flex-wrap:wrap;
				// justify-content:space-between;
				margin-top: 28rpx;
				
				.pImgageBox{
					position: relative;
					margin: 0 16rpx 16rpx;
					
					.close{
						position: absolute;
						top: -18rpx;
						right: -18rpx;
						z-index: 1;
						height: 40rpx;
						width: 40rpx;
						font-size: 0;
						background-color: #fff;
						border-radius: 50%;
					}
				}
				.pImgage{
					width: 124rpx;
					height: 124rpx;
				}
				.addBtn{
					// display: flex;
					// align-items: center;
					// justify-content: center;
					width: 124rpx;
					height: 124rpx;
					margin: 0 16rpx 16rpx;
					text-align: center;
					background: #F8F8FA;
					border-radius: 8rpx;
					
					.addBtnIcon{
						margin-top: 20rpx;
						width: 100%;
					}
					
					.addBtnTips{
						font-size: 24rpx;
						line-height: 36rpx;
						color: #666;
					}
				}
			}
		}
		
		.returnTips{
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: #FF9333;
			background: #FFF4EB;
		}
		
		.handleBox{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 18rpx 32rpx;
			text-align: right;
			background-color: #fff;
			
			button{
				background-color: inherit;
				display: inline-block;
				height: 60rpx;
				padding: 0 40rpx;
				margin-right: 16rpx;
				color: #666666;
				font-size: 24rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				border-radius: 30rpx;
				border: 2rpx solid #999999;
				
			}
			.remind{
				width: 100%;
				background: #FF5238;
				color: #fff;
				border: none;
			}
			.reclose{
				color: #666666;
				width: 30%;
				background-color: #fff;
				border: 2rpx solid #e4e7ed;
			}
		}
	}
</style>
